<template>
    <div>
        <h3>会员列表</h3>
        显示会员信息:
        {{  }}
        <input type="button" value="增加" @click="add" class="btn btn-primary">
        <div>
            会员名称:<input type="text" v-model="quertInfo.userName">
            会员等级:<select v-model="quertInfo.LevelId" >
                <option value="">请选择</option>
                <option :value="item.LevelName" v-for=" item in  datalevel.list">{{ item.LevelName }}</option>
            </select>
            <input type="button" value="查询" @click="getlist" class="btn btn-primary">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>会员编号</td>
                    <td>会员名称</td>
                    <td>会员手机号</td>
                    <td>会员身份证号</td>
                    <td>会员等级</td>
                    <td>会员积分</td>
                    <td>会员余额</td>
                    <td>生日</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>操作哦</td>
                </tr>

                <tr v-for="item in data.list" :key="item.Id">
                  
                    <td>{{item.MemberCode}}</td>
                    <td>{{item.UserName}}</td>
                    <td>{{item.Phone.substring(0,3)+"****"+item.Phone.substring(7)}}</td>
                    <td>{{item.Card}}</td>
                    <td>
                        {{ item.LevelId }}
                    </td>
                    <td>{{item.JiFen}}</td>
                    <td style="color: red;">¥{{item.Money.toFixed(2)}}</td>
                    <td>{{ moment(item.Birthday).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>{{item.Sex?"男":"女"}}</td>
                    <td>{{item.State?"可用":"不可用"}}</td>
                    <td>
                        <input type="button" class="btn btn-primary" value="详情">
                        <input type="button" class="btn btn-success" value="修改" @click="upd(item.Id)">
                        <input type="button" class="btn btn-danger" value="删除" @click="del(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted} from 'vue'
import{useRouter} from 'vue-router'
import axios from 'axios';
import moment from 'moment';
import {useUserStore} from '../../stores/user'
const UserStore=useUserStore();

//====================生命周期=============================
onMounted(()=>{
    getlistlevel();
    getlist();
  
})
const router=useRouter();

//获取会员列表时向后端传递的参数
let  quertInfo=reactive({
    userName:'',
    LevelId:'',
})

//会员列表后端返回数据
let data:any=reactive({
    list:{},
})
//会员等级后端返回数据
let  datalevel :any=reactive({
    list:[],
})

//====================函数=============================

//修改跳转
const upd=(id:any)=>{
    router.push({
        path:'/memberUpdate',
        query:{id:id}//路由传参
    })
}



//删除
const del=(id:any)=>{
    //1.提示
   if(confirm("确认删除吗?")){
        axios({
            method:'delete',
            url:'/api/Member/DelMemberItem',
            params:{id:id}//请求传参

        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功");
                getlist();
            }
            else{
                alert("删除失败");
                return;
            }
        })
        .catch(err=>{
            console.log(err);
        })
   }
}


//跳转到会员增加页面
const add=()=>{
    router.push('/vipadd')
}

//会员等级列表
const getlistlevel=()=>{
    axios({
        method:'get',
        url:'/api/Member/GetMemberLevels',
    

    })
    .then(res=>{
        console.log(res);
        datalevel.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}





//会员显示
const getlist=()=>{
    axios({
        method:'get',
        url:'/api/Member/GetMembersList',
        params:quertInfo,

    })
   
    .then(res=>{
        console.log(res);
        data.list=res.data;
        
    })
    .catch(err=>{
        console.log(err);
    })
}













</script>




<style scoped>

input[type='button']{
    margin-left: 10px;
}


</style>